<template>
	<view class="index">
		<view class="product-info-wrapper">
			<view class="supplier-wrapper">
				<view class="name">{{ form.supplierName }}</view>
				<uni-icons type="phone" size="18" class="icon" color="#666666"></uni-icons>
				<text class="tel" @click.stop="callPhone(form.supplierTel)">{{ form.supplierTel }}</text>
			</view>
			<view class="product-info">
				<view class="productName-wrapper">
					<view class="productName">
						{{ form.productName }}
					</view>
					<uni-icons type="right" color="#ffffff" size="18"></uni-icons>
				</view>
				<view class="info-wrapper">
					<view class="item">
						货号：{{ form.productCode }}
					</view>
					<view class="item">
						规格：{{ form.specification || '-' }}
					</view>
					<view class="item">
						毛重：{{ form.grossWeight }}斤
					</view>
					<view class="item">
						净重：{{ form.netWeight }}斤
					</view>
					<view class="item" v-for="(item,index) in form.detailAttribute" :key="index">
						{{ item.name }}：{{ item.value }}
					</view>
				</view>
			</view>
		</view>
		<view class="testing-date">
			<view class="title-wrapper">
				<view class="title">
					商品总数量：{{ form.quantity }}件
				</view>
			</view>
		</view>
		<view class="testing-date">
			<view class="title-wrapper">
				<view class="title">
					已质检数量：{{ form.checkQuantity }}件
				</view>
			</view>
		</view>
		<view class="testing-date">
			<view class="title-wrapper">
				<view class="title">
					质检情况：{{ form.rejectTypeName }}
				</view>
			</view>
		</view>
		<view class="testing-date" v-if="form.rejectQuantity > 0">
			<view class="title-wrapper">
				<view class="title">
					拒收数量：{{ form.rejectQuantity }}件
				</view>
			</view>
		</view>
		<view class="testing-date">
			<view class="title-wrapper">
				<view class="title">
					质检时间：{{ form.rejectTime }}
				</view>
			</view>
			<view class="tip" v-if="form.rejectType === 'ALL'">
				该商品大部分存在质量问题，全部拒收，请供应商重新换货。
			</view>
			<view class="customer-wrapper" v-if="form.rejectType === 'PART'">
				<view class="customer-item" v-for="(item,index) in customerList" :key="index">
					<view class="city">
						<text class="label">城市仓</text>
						<text
							class="value">{{ item.pickupPointCode }}:{{ item.cityName }}.{{ item.pickupPointName }}</text>
					</view>
					<view class="item" v-for="(items,indexs) in item.list" :key="items.sortCode">
						<view class="customer">
							<text>{{ indexs + 1 }}、</text>
							<view class="customerName">【{{ items.sortCode }}】{{ items.customerPetName }}</view>
						</view>
						<view class="number">
							拒收:{{ items.rejectQuantity }}件
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="images-wrapper">
			<view class="title-wrapper">
				<view class="title">
					相关记录
				</view>
			</view>
			<view class="product-image-list" v-if="imagelist.length">
				<view class="item" v-for="(item,index) in imagelist" :key="index">
					<image @click="openPic(index)" :src="item+ '?imageView2/3/w/300/q/100'" class="product-image"
						mode="aspectFill">
					</image>
				</view>
			</view>
			<view v-else class="no-data">
				暂无相关记录~
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				imagelist: [],
				customerList: []
			}
		},
		onLoad(option) {
			this.getData(option.id)
		},
		methods: {
			async getData(id) {
				const data = await this.$api.get('/adm/supply-reject/getInfo', {
					id: id
				})
				if (data.code === 200) {
					if (data.data.detailAttribute) {
						data.data.detailAttribute = JSON.parse(data.data.detailAttribute)
					} else {
						data.data.detailAttribute = []
					}
					if (data.data.rejectImage) {
						this.imagelist = data.data.rejectImage.split(',')
					}
					this.customerList = [];
					if (data.data.rejectItems && data.data.rejectItems.length) {
						data.data.rejectItems.forEach(row => {
							const newCustomerObj = {
								customerPetName: row.customerPetName,
								customerId: row.customerId,
								sortCode: row.sortCode,
								rejectQuantity: row.rejectQuantity
							}
							const newObj = {
								pickupPointCode: row.pickupPointCode,
								pickupPointName: row.pickupPointName,
								cityName: row.cityName,
								list: [newCustomerObj]
							}
							const objIndex = this.customerList.findIndex(item => item.pickupPointCode === row
								.pickupPointCode)
							if (objIndex === -1) {
								this.customerList.push(newObj)
							} else {
								this.customerList[objIndex].list.push(newCustomerObj)
							}
						})
					}
					this.form = data.data;
				}
			},
			openPic(index) {
				uni.previewImage({
					urls: this.imagelist,
					current: index
				});
			},
			callPhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;
		overflow: auto;

		.product-info-wrapper {
			margin: 20upx;
			border-radius: 20upx;
			background-color: #ffffff;
			overflow: hidden;

			.supplier-wrapper {
				height: 80upx;
				display: flex;
				align-items: center;
				padding: 0 30upx;
				background-color: #F5F6FA;

				.name {
					flex: 1;
					font-size: 32upx;
					//width: 500rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden; //溢出内容隐藏
					text-overflow: ellipsis; //文本溢出部分用省略号表示
					display: -webkit-box; //特别显示模式
					-webkit-line-clamp: 1; //行数
					line-clamp: 1;
					-webkit-box-orient: vertical; //盒子中内容竖直排列
					font-weight: bold;
					color: #343434;
				}

				.tel {
					font-size: 32upx;
					color: #343434;
				}
			}

			.product-info {
				overflow: hidden;
				padding: 0 30upx;

				.productName-wrapper {
					margin-top: 20upx;
					display: flex;
					align-items: center;

					.productName {
						flex: 1;
						font-size: 32upx;
						//width: 500rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden; //溢出内容隐藏
						text-overflow: ellipsis; //文本溢出部分用省略号表示
						display: -webkit-box; //特别显示模式
						-webkit-line-clamp: 1; //行数
						line-clamp: 1;
						-webkit-box-orient: vertical; //盒子中内容竖直排列
						font-weight: bold;
						color: #464646;
					}
				}

				.info-wrapper {
					display: flex;
					flex-wrap: wrap;
					padding-bottom: 20upx;

					.item {
						width: 50%;
						margin-top: 20upx;
						font-size: 32upx;
						color: #666666;
					}
				}
			}
		}

		.testing-date {
			background-color: #ffffff;
			margin: 20upx 20upx 0 20upx;
			border-radius: 20upx;
			padding: 25upx;

			.title-wrapper {
				display: flex;
				align-items: center;

				.icon {
					margin-right: 5upx;
				}

				.title {
					height: 34upx;
					line-height: 34upx;
					font-size: 34upx;
					color: #222222;
					padding-left: 10upx;
					border-left: 8upx solid #555BFF;
				}
			}

			.tip {
				margin-top: 20upx;
				font-size: 32upx;
				color: #434343;
			}

			.customer-wrapper {
				margin-top: 20upx;

				.customer-item {
					.city {
						height: 90upx;
						display: flex;
						align-items: center;
						border-top: 1upx dashed #cecece;

						.label {
							margin-right: 20upx;
						}

						.value {
							font-weight: bold;
						}
					}

					.item {
						margin-bottom: 10upx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						&:last-child {
							margin-bottom: 20upx;
						}

						.customer {
							display: flex;
							align-items: center;

							.customerName {}
						}
					}
				}
			}
		}

		.images-wrapper {
			background-color: #ffffff;
			margin: 20upx 20upx 0 20upx;
			border-radius: 20upx;
			padding: 25upx;

			.title-wrapper {
				display: flex;
				align-items: center;

				.icon {
					margin-right: 5upx;
				}

				.title {
					height: 34upx;
					line-height: 34upx;
					font-size: 34upx;
					color: #222222;
					padding-left: 10upx;
					border-left: 8upx solid #555BFF;
				}
			}

			.product-image-list {
				display: flex;
				flex-wrap: wrap;
				margin-top: 26upx;

				.item {
					position: relative;
					width: 32%;
					height: 206upx;
					border-radius: 20upx;
					overflow: hidden;
					margin-left: 2%;
					margin-bottom: 20upx;

					&:nth-child(3n+1) {
						margin-left: 0;
					}

					.product-image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.no-data {
				text-align: center;
				margin: 50upx 0;
			}
		}

	}
</style>